<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Log in</title>
    <link rel="stylesheet" type="text/css" href="static/css/base.css"/>
    <style lang="css">

        body {
            background-color: lightgray;
        }

        .container {
            position: absolute;
            width: auto;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .login-box {
            border-radius: 5px;
            border-width: 2px;
            background-color: white;
            width: 40vw;
            height: 50vh;
        }

        .back-button-area {
            margin-top: 30px;
            margin-left: 30px;
        }

        .title-group {
            margin-bottom: 0;
        }

        .input-box {
            margin-left: 10%;
            margin-top: 80px;
            width: 80%;
            height: 60%;
        }

        .input-group {
            margin-block: 15px;
            width: 100%;
        }

        .input-group input:focus {
            outline: 2px solid deepskyblue;
            box-shadow: 1px 1px 10px 1px aliceblue;
            transition: 1s;
        }

        .button-group {
            display: flex;
            margin-top: 30px;
        }

        .wrong-group {
            display: none;
            display: none;
        }
    </style>
    <script lang="JavaScript">
        const base_href = window.location.href.slice(0, window.location.href.lastIndexOf('/'))
        const backIndex = () => {
            window.location.href = base_href + '/'
        }
        const submitLoginForm = () => {
            if (
                document.getElementById("username").value.length < 3 &&
                document.getElementById("password").value.length < 3) {
                document.getElementById("wrong-tip-1").setAttribute("style", "display: initial")
                document.getElementById("wrong-tip-2").setAttribute("style", "display: initial")
            } else if (document.getElementById("username").value.length < 3) {
                document.getElementById("wrong-tip-1").setAttribute("style", "display: initial")
                document.getElementById("wrong-tip-2").setAttribute("style", "display: none")
            } else if (document.getElementById("password").value.length < 3) {
                document.getElementById("wrong-tip-1").setAttribute("style", "display: none")
                document.getElementById("wrong-tip-2").setAttribute("style", "display: initial")
            } else {
                document.getElementById("login-form").setAttribute("action", base_href + '/LoginServlet')
                document.getElementById("login-form").submit()
            }
        }
        const toRegister = () => {
            window.location.href = base_href + '/register.jsp'
        }
    </script>
</head>
<body>
<div class="container login-box">
    <div class="back-button-area">
        <div class="format-button" onclick="backIndex()">返回</div>
    </div>
    <div class="input-box">
        <div class="title-group">
            <h1> Welcome Book Note Sys </h1>
        </div>
        <form method="post" id="login-form" style="height: auto;">
            <div class="input-group">
                <input class="format-input" name="username" placeholder="请输入用户名" id="username"/>
            </div>
            <div class="wrong-group" id="wrong-tip-1">
                <span style="color: red;">用户名不能小于3位</span>
            </div>
            <div class="input-group">
                <input class="format-input" name="password" placeholder="请输入密码" id="password" type="password"/>
            </div>
            <div class="wrong-group" id="wrong-tip-2">
                <span style="color: red;">密码不能小于3位</span>
            </div>
        </form>
        <div class="button-group">
            <div class="format-button primary-button" style="margin-left: auto;" onclick="submitLoginForm()">登录</div>
            <div class="format-button" style="margin-left: 5px;" onclick="toRegister()">注册</div>
        </div>
    </div>
</div>
</body>
</html>
